<template>
	<div class="app-live-rank">
		<!-- <up-title titleT="app.liveRank" icon="winners" iconColor="var(--color-success)" mb /> -->
		<div class="flex justify-between items-center">
			<app-live-rank-tabs
				v-model="tab"
				:tabs="tabs"
				@changeSize="handleChangeSize"
				@changeMode="handleChangeMode" />
			<!-- <app-live-rank-page v-model="page" /> -->
		</div>
		<div class="h-group-t"></div>
		<component :is="component" :pageSize="pageSize" />
	</div>
</template>

<script setup lang="ts">
// import { UpTitle } from '@/components/up'
import AppLiveRankTabs from './app-live-rank-tabs.vue'
// import AppLiveRankPage from './app-live-rank-page.vue'
import AppLiveRankMybet from './app-live-rank-mybet.vue'
import AppLiveRankAllbet from './app-live-rank-allbet.vue'
// import AppLiveRankHighroller from './app-live-rank-highroller.vue'
import AppLiveRankRace from './app-live-rank-race/index.vue'
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useRequest } from '@/hooks'
import { useProfileStore } from '@/store'
import { updateIncognitoMode } from '@/api/account.ts'
const profileStore = useProfileStore()

defineProps({
	type: {
		type: String,
		default: 'myBet'
	},
	tabs: {
		type: Array,
		default: () => ['casinoBets', 'sportsBets', 'race']
	}
})

const route = useRoute()

//const tab = ref(props.type || (props.tabs.length && (props.tabs[0] as string)) || 'myBet')
const tab = ref('casinoBets')
const pageSize = ref()

if (route.name === 'race') {
	tab.value = 'race'
} else if (route.name === 'sports') {
	tab.value = 'sportsBet'
}

// const page = ref(10)

const component = computed(() => {
	if (tab.value === 'myBet') {
		return AppLiveRankMybet
	}
	if (tab.value === 'casinoBets') {
		return AppLiveRankAllbet
	}
	if (tab.value === 'sportsBets') {
		return AppLiveRankAllbet
	}
	if (tab.value === 'race') {
		return AppLiveRankRace
	}
	return AppLiveRankMybet
})

const handleChangeSize = (val: number) => {
	pageSize.value = val
}
const { run: runIncognitoMode } = useRequest(updateIncognitoMode, {
	showError: true,
	showSuccess: true,
	onSuccess: () => profileStore.getUserInfo()
})
const handleChangeMode = (val: boolean) => {
	runIncognitoMode({ status: val })
}
</script>
